<template>
  <div class="container" @click="goBack">

    <!-- 图表容器 -->
    <div class="chart-container">
      <Echart
          id="rightTop"
          :options="option"
          class="right_top_inner"
          ref="charts"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data() {
    return {
      option: {} // 用于配置 Echarts 图表的选项
    };
  },

  created() {
    // 可以在这里初始化一些数据
    this.getData(); // 用于获取数据
  },

  mounted() {
    this.getData(); // 用于获取数据
  },
  methods: {
    async getData() {
      try {
        const response = await axios.get('http://localhost:8080/mine-water-inflow/getsGroup');
        console.log('查询矿井涌水量的response.data = ', response.data);
        if (response.code === '0') {
          this.$nextTick(() => {
            this.init(response.data);
          });
        } else {
          this.$message.error('查询矿井涌水量失败');
        }
      } catch (error) {
        this.$message.error('查询矿井涌水量失败');
      }
    },
    init(data) {
      // 提取所有时间点并去重排序
      const allTimes = [];
      Object.values(data).forEach(series => {
        series.forEach(item => {
          if (!allTimes.includes(item.time)) {
            allTimes.push(item.time);
          }
        });
      });
      
      // 对时间进行排序（假设格式是"X月"）
      allTimes.sort((a, b) => {
        const monthA = parseInt(a.replace('月', ''));
        const monthB = parseInt(b.replace('月', ''));
        return monthA - monthB;
      });

      // 准备系列数据
      const series = [];
      const colors = [
        "rgba(236,167,30,0.7)",
        "rgba(30,144,236,0.7)",
        "rgba(30,236,144,0.7)",
        "rgba(144,30,236,0.7)",
        "rgba(236,30,144,0.7)"
      ];
      
      let colorIndex = 0;
      let maxValue = 0;
      
      Object.entries(data).forEach(([name, items]) => {
        // 为每个系列创建数据点，确保与allTimes顺序一致
        const seriesData = allTimes.map(time => {
          const item = items.find(i => i.time === time);
          if (item) {
            const value = parseFloat(item.water_inflow);
            if (value > maxValue) maxValue = value;
            return value;
          }
          return null; // 没有数据的时间点设为null
        });
        
        series.push({
          name: name,
          data: seriesData,
          type: "line",
          symbol: "circle",
          symbolSize: [8, 8],
          color: colors[colorIndex % colors.length],
          markPoint: {
            data: [
              {
                name: "最大值",
                type: "max",
                valueDim: "y",
                symbol: "circle",
                symbolSize: [60, 26],
                symbolOffset: [0, -20],
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                },
                label: {
                  color: colors[colorIndex % colors.length],
                  backgroundColor: "rgba(252,144,16,0.1)",
                  borderRadius: 6,
                  padding: [7, 14],
                  borderWidth: 0.5,
                  borderColor: colors[colorIndex % colors.length],
                  formatter: function(params) {
                    return `${name}最高值：${params.value}`;
                  },
                },
              },
            ],
          },
        });
        
        colorIndex++;
      });

      this.option = {
        xAxis: {
          type: "category",
          data: allTimes,
          name: "时间",
          boundaryGap: true,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(31,99,163,.1)",
            },
          },
          axisLabel: {
            interval: 0,
            rotate: 45,
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        yAxis: {
          min: 0,
          max: Math.ceil(maxValue * 1.1),
          type: "value",
          name: "涌水量（m^3/h）",
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(31,99,163,.1)",
            },
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        legend: {
          data: Object.keys(data),
          textStyle: {
            color: "#7EB7FD"
          }
        },
        grid: {
          show: true,
          left: "10px",
          right: "30px",
          bottom: "10px",
          top: "28px",
          containLabel: true,
          borderColor: "#1F63A3",
        },
        series: series
      };
      this.$refs.charts.echartsInstance.setOption(this.option, true); // 更新图表
    },
    // 返回上一个页面
    goBack() {
      this.$router.go(-1); // 使用 Vue Router 的返回功能
    },
  },
};
</script>

<style lang='scss' scoped>
.container {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.back-button {
  margin-bottom: 20px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: rgba(0, 184, 255, 0.18);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.back-button:hover {
  background-color: #45a049;
}

.chart-container {
  width: 1200px; /* 调整图表容器的宽度 */
  height: 650px; /* 调整图表容器的高度 */
  border-radius: 5px;
  overflow: hidden;
}

.right_top_inner {
  width: 100%;
  height: 100%;
}
</style>